<!DOCTYPE html>
<!-- ng-app -->
<html lang="en" ng-app="isolateScope">
<head>
    <meta charset="UTF-8">
    <title></title>
    <script src="../../js/plugins/angular/angular.min.js" type="text/javascript"></script>
</head>
<body>
    <!-- 示例八：引用绑定示例
            通过这种形式的绑定，孤立作用域将有能力访问到父作用域中的函数对象，从而能够执行父作用域中的函数来获取某些结果。
                这种方式的绑定跟单向绑定一样，只能以只读的方式访问父作用函数，并且这个函数的定义必须写在父作用域 HTML 中的 attr（属性）节点上。

            这种方式的绑定虽然无法修改父作用域的 attr 所设定的函数对象，但是却可以通过执行函数来改变父作用域中某些属性的值，
                来达到一些预期的效果。示例代码如下：
    -->

    <!--
        代码中我们在父作用域中指定了一个函数对象$scope.func，在孤立作用域中通过对 HTML 属性的绑定从而引用了 func。
            需要注意的是 link 函数中对 func 对象的使用方法，$scope.isolates 获得的仅仅是函数对象，而不是调用这个对象，
            因此我们需要在调用完$scope.isolates 之后再调用这个函数，才能得到真正的执行结果。
    -->
    <div ng-controller="ctrl">
        <div isolate-directive isolates="func"></div>
    </div>

    <script>
        angular.module('isolateScope', [])
            .controller("ctrl", function ($scope) {
                $scope.func = function () {
                    alert("Nick DeveloperWorks");
                }
            })
            .directive("isolateDirective", function () {/* 可以访问到父作用域中的函数对象 */
                return {
                    replace : true,
                    scope : {
                        isolates : '&',
                    },
                    link : function($scope, $element, $attr) {
                        var func = $scope.isolates();
                        func();
                    }
                };
            });

    </script>
</body>
</html>